import React from 'react';
import '@chatui/core/es/styles/index.less';
// 引入组件
import Chat, { Bubble, useMessages, Card, Goods} from '@chatui/core';
// 引入样式
import '@chatui/core/dist/index.css';
const initialMessages = [
  {
    type: 'text',
    content: { text: '主人好，我是智能助理，你的贴心小助手~' },
    user: { avatar: '//gw.alicdn.com/tfs/TB1DYHLwMHqK1RjSZFEXXcGMXXa-56-62.svg' },
  },

];

// 默认快捷短语，可选
const defaultQuickReplies = [
  {
    icon: 'Bubble',
    name: '联系人工服务',
    isNew: true,
    isHighlight: true,
  },
  {
    name: '物流信息',
    isNew: true,
  },
  {
    name: '短语2',
    isHighlight: true,
  },
  {
    name: '短语3',
  },
];

export default function () {
  // 消息列表
  const { messages, appendMsg, setTyping } = useMessages(initialMessages);

  // 发送回调
  function handleSend(type, val) {
    if (type === 'text' && val.trim()) {
      // TODO: 发送请求
      appendMsg({
        type: 'text',
        content: { text: val },
        position: 'right',
      });

      setTyping(true);

      // 模拟回复消息
      setTimeout(() => {
        if (val == '物流信息') {
          appendMsg(
            {
              type: 'con',
              content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' },
            },
          );
        } else {
          appendMsg(
            {
              type: 'text',
              content: { text: '亲，您遇到什么问题啦？请简要描述您的问题~' },
            },
          );
        }
      }, 1000);
    }
  }

  // 快捷短语回调，可根据 item 数据做出不同的操作，这里以发送文本消息为例
  function handleQuickReplyClick(item) {
    handleSend('text', item.name);
  }


  function renderMessageContent(msg) {
    const { type, content } = msg;

    // 根据消息类型来渲染
    switch (type) {
      case 'text':
        return <Bubble content={content.text} />;
      case 'image':
        return (
          <Bubble type="image">
            <img src={content.picUrl} alt="" />
          </Bubble>
        );
      case 'con':
        return (
          <Card size="xl">
            <Goods
              type="order"
              img="//gw.alicdn.com/tfs/TB1p_nirYr1gK0jSZR0XXbP8XXa-300-300.png"
              name="商品名称"
              desc="商品描述"
              tags={[
                { name: '3个月免息' },
                { name: '4.1折' },
              ]}
              currency="¥"
              price="300.00"
              count={8}
              unit="kg"
              status="交易关闭"
              action={{
                label: '详情',
                onClick(e) {
                  console.log(e);
                  e.stopPropagation();
                },
              }}
            />
            <Goods
              type="order"
              img="//gw.alicdn.com/tfs/TB1p_nirYr1gK0jSZR0XXbP8XXa-300-300.png"
              name="这个商品名称非常非常长长到会换行"
              desc="商品描述"
              tags={[
                { name: '3个月免息' },
                { name: '4.1折' },
                { name: '黑卡再省33.96' },
              ]}
              currency="$"
              price="300.00"
              count={8}
              unit="kg"
              action={{
                label: '详情',
                onClick(e) {
                  console.log(e);
                  e.stopPropagation();
                },
              }}
            />
          </Card>
        )

      default:
        return null;
    }
  }

  return (
    <Chat
      navbar={{ title: '智能助理' }}
      messages={messages}
      renderMessageContent={renderMessageContent}
      quickReplies={defaultQuickReplies}
      onQuickReplyClick={handleQuickReplyClick}
      onSend={handleSend}
      // text='111'
      placeholder='请输入...'

    />
  );
}
